Implementering av verktøytips: Tilgjengelig informasjon ved hover og fokus

Verktøytips er små, kontekstuelle hjelpemeldinger som vises når en bruker holder musepekeren over eller fokuserer på et element. De kan gi tilleggsinformasjon, klargjøre formålet med et element eller tilby hint om hvordan en funksjon brukes. Verktøytips kan imidlertid lett bli et mareritt for tilgjengelighet hvis de ikke implementeres riktig. Denne guiden skisserer beste praksis for å lage verktøytips som kan brukes av alle, inkludert brukere med nedsatt funksjonsevne.

Hvorfor tilgjengelighet er viktig for verktøytips

Tilgjengelighet handler ikke bare om å følge regler; det handler om å skape en bedre brukeropplevelse for alle. Når verktøytips ikke er tilgjengelige, kan det ekskludere brukere som er avhengige av hjelpeteknologier som skjermlesere, tastaturnavigasjon eller stemmestyring. Tenk på disse scenariene:

• Brukere av skjermlesere: Hvis et verktøytips ikke er riktig merket, vil en skjermleser kanskje ikke kunngjøre dets tilstedeværelse eller innhold.
• Tastaturbrukere: Hvis et verktøytips bare vises ved 'hover', vil ikke tastaturbrukere kunne få tilgang til det.
• Brukere med motoriske funksjonsnedsettelser: Presise musebevegelser som kreves for 'hover'-interaksjoner kan være utfordrende eller umulige.
• Brukere med kognitive funksjonsnedsettelser: Et dårlig timet eller forvirrende verktøytips kan skape frustrasjon og hindre forståelse.

Ved å følge beste praksis for tilgjengelighet kan vi sikre at verktøytips forbedrer i stedet for å hindre brukeropplevelsen for alle.

Nøkkelprinsipper for tilgjengelige verktøytips

Følgende prinsipper er avgjørende for å lage tilgjengelige verktøytips:

1. Gi alternativ tilgang: Sørg for at verktøytips er tilgjengelige via både 'hover' og tastaturfokus.
2. Bruk ARIA-attributter: Bruk ARIA (Accessible Rich Internet Applications)-attributter for å korrekt identifisere og beskrive verktøytips for hjelpeteknologier.
3. Håndter fokus: Kontroller hvor fokus flyttes når et verktøytips vises og skjules.
4. Sørg for tilstrekkelig kontrast: Gi nok fargekontrast mellom teksten i verktøytipset og bakgrunnen.
5. Gi tilstrekkelig med tid: Gi brukere nok tid til å lese innholdet i verktøytipset.
6. Gjør dem lukkbare: Tilby en tydelig måte å lukke verktøytipset på.
7. Unngå overforbruk: Bruk verktøytips sparsomt og bare når det er nødvendig.

Implementeringsteknikker

1. Bruk av 'hover' og 'focus'

Det mest kritiske aspektet ved tilgjengelige verktøytips er å sikre at de er tilgjengelige for både mus- og tastaturbrukere. Dette betyr at verktøytipset skal vises både ved 'hover' og når elementet mottar fokus.

HTML:

            <a href="#" aria-describedby="tooltip-example">Eksempellenke</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Dette er et eksempel på et verktøytips.</div>
            

              
                Copy
              
            
          

CSS:

            a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Sikrer at verktøytipset er øverst */
}

            

              
                Copy
              
            
          

Forklaring:

• aria-describedby: Dette attributtet kobler lenken til verktøytipselementet ved hjelp av dets ID. Dette forteller hjelpeteknologier at verktøytipset gir tilleggsinformasjon om lenken.
• role="tooltip": Denne ARIA-rollen identifiserer elementet som et verktøytips.
• CSS-en bruker den tilstøtende søskenvelgeren (+) for å vise verktøytipset når lenken holdes over eller fokuseres på.

JavaScript (Avansert kontroll - Valgfritt):

Mens CSS kan håndtere enkel visning/skjuling, gir JavaScript mer robust kontroll, spesielt når verktøytips genereres dynamisk eller trenger mer kompleks atferd.

            const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

2. Bruk av ARIA-attributter

ARIA-attributter er essensielle for å gi semantisk informasjon til hjelpeteknologier. Her er en oversikt over nøkkelattributter:

• aria-describedby: Som nevnt tidligere, etablerer dette attributtet forholdet mellom det utløsende elementet og verktøytipselementet.
• role="tooltip": Dette attributtet definerer eksplisitt elementet som et verktøytips.
• aria-hidden="true"/aria-hidden="false": Bruk disse for å indikere om verktøytipset for øyeblikket er synlig for hjelpeteknologier. Når verktøytipset er skjult, sett aria-hidden="true". Når det er synlig, sett aria-hidden="false". Dette er spesielt viktig når man bruker JavaScript for å kontrollere synligheten til verktøytipset.

Eksempel:

            <button aria-describedby="help-tooltip">Send inn</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Klikk her for å sende inn skjemaet.</div>
            

              
                Copy
              
            
          

JavaScript (for aria-hidden):

            const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

3. Håndtering av fokus

Når et verktøytips vises, skal det generelt *ikke* stjele fokus fra det utløsende elementet. Fokus bør forbli på elementet som utløste verktøytipset. Dette sikrer at tastaturbrukere kan fortsette å navigere på siden uten uventede avbrudd.

Imidlertid kan det være situasjoner der du *ønsker* å flytte fokus til verktøytipset, spesielt hvis verktøytipset inneholder interaktive elementer (f.eks. lenker, knapper). I dette tilfellet, sørg for at:

• Verktøytipset er visuelt tydelig for å indikere at det har fokus.
• Det er en tydelig måte å returnere fokus til det opprinnelige utløsende elementet (f.eks. en lukkeknapp i verktøytipset).

I de fleste tilfeller er det å foretrekke å unngå fokushåndtering i selve verktøytipset for enkelhet og brukervennlighet.

4. Sikre tilstrekkelig kontrast

Fargekontrast er avgjørende for lesbarhet. Sørg for at tekstfargen i verktøytipsene dine har tilstrekkelig kontrast mot bakgrunnsfargen. Retningslinjene for tilgjengelig webinnhold (WCAG) anbefaler et kontrastforhold på minst 4.5:1 for normal tekst og 3:1 for stor tekst (18pt eller 14pt fet skrift).

Bruk online kontrastkontrollverktøy for å verifisere at fargevalgene dine oppfyller tilgjengelighetsstandardene. Eksempler på kontrastkontrollverktøy inkluderer:

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Coolors: https://coolors.co/contrast-checker

Eksempel (God kontrast):

            .tooltip {
  background-color: #000;
  color: #fff;
}

            

              
                Copy
              
            
          

Eksempel (Dårlig kontrast):

            .tooltip {
  background-color: #fff;
  color: #eee;
}

            

              
                Copy
              
            
          

5. Gi tilstrekkelig med tid

Brukere trenger nok tid til å lese innholdet i verktøytipset. Unngå verktøytips som forsvinner for fort. Selv om det ikke finnes et magisk tall, sikt mot en minimum visningstid på noen få sekunder. Verktøytipset bør også forbli synlig så lenge brukeren holder over eller har fokus på det utløsende elementet. Hvis du må lukke verktøytipset på grunn av andre hendelser, gi en indikasjon på at verktøytipset vil lukkes.

Hvis innholdet i verktøytipset er langt, vurder å gi brukeren en måte å lukke det manuelt på (f.eks. en lukkeknapp eller ved å trykke på Escape-tasten).

6. Gjøre dem lukkbare

Selv om verktøytips ofte forsvinner automatisk når brukeren flytter musen bort eller fjerner fokus, er det god praksis å tilby en tydelig måte å lukke dem manuelt, spesielt for lange verktøytips eller verktøytips som inneholder interaktive elementer.

Metoder for å lukke verktøytips:

• Lukkeknapp: Inkluder en visuelt fremtredende lukkeknapp i verktøytipset.
• Escape-tasten: La brukere lukke verktøytipset ved å trykke på Escape-tasten.
• Klikk utenfor: Lukk verktøytipset når brukeren klikker hvor som helst utenfor verktøytipset og det utløsende elementet. (Bruk med forsiktighet, da det kan være forstyrrende).

Eksempel (Lukkeknapp):

            <div id="my-tooltip" role="tooltip" aria-hidden="true">
  Dette er innholdet i mitt verktøytips.
  <button onclick="hideTooltip()">Lukk</button>
</div>
            

              
                Copy
              
            
          

Eksempel (Escape-tasten):

            document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Erstatt med din faktiske funksjon for å skjule verktøytips
  }
});

            

              
                Copy
              
            
          

7. Unngå overforbruk

Verktøytips bør brukes sparsomt og bare når de gir virkelig nyttig informasjon. Overforbruk av verktøytips kan rote til grensesnittet, distrahere brukere og skape en frustrerende opplevelse.

Alternativer til verktøytips:

• Tydelige etiketter: Bruk klare og beskrivende etiketter for skjemafelt, knapper og lenker.
• Kontekstuell hjelp: Tilby hjelpetekst direkte i grensesnittet, nær de relevante elementene.
• Hjelpedokumentasjon: Lenk til omfattende hjelpedokumentasjon for mer komplekse funksjoner.

Avanserte betraktninger

Dynamisk innhold

Hvis innholdet i verktøytipset ditt genereres dynamisk (f.eks. lastet fra et API eller oppdatert basert på brukerinput), sørg for at aria-describedby-attributtet og synligheten til verktøytipset oppdateres tilsvarende. Bruk JavaScript til å håndtere disse oppdateringene.

Posisjonering

Vurder nøye posisjoneringen av verktøytipsene dine. Unngå å plassere dem slik at de skjuler viktig innhold eller forårsaker forskyvninger i layouten. Vær oppmerksom på forskjellige skjermstørrelser og oppløsninger, og bruk CSS for å sikre at verktøytipsene alltid er synlige innenfor visningsområdet.

Mobile enheter

Verktøytips er tradisjonelt avhengige av 'hover'-interaksjoner, som ikke er tilgjengelige på berøringsbaserte enheter. For mobile enheter, vurder å bruke alternative interaksjonsmetoder, som:

• Trykk: Vis verktøytipset når brukeren trykker på elementet.
• Langt trykk: Vis verktøytipset når brukeren trykker og holder på elementet.
• Vis ved fokus Vis når elementet mottar fokus. Dette kan oppnås med JavaScript ved å sjekke for berøringsstøtte (f.eks. ('ontouchstart' in window)) og endre visningsatferden deretter.

Test dine verktøytips

Test verktøytipsene dine grundig for å sikre at de er tilgjengelige for alle brukere. Bruk en kombinasjon av manuell testing og automatiserte verktøy for tilgjengelighetstesting.

Testmetoder:

• Tastaturnavigasjon: Verifiser at verktøytips er tilgjengelige ved bruk av tastaturet.
• Skjermlesertesting: Bruk en skjermleser for å sikre at verktøytipsene blir korrekt kunngjort.
• Fargekontrastanalyse: Bruk et verktøy for kontrastkontroll for å verifisere tilstrekkelig kontrast.
• Mobiltesting: Test verktøytips på forskjellige mobile enheter og skjermstørrelser.
• Automatisert tilgjengelighetstesting: Bruk verktøy som axe DevTools, WAVE eller Lighthouse for å identifisere potensielle tilgjengelighetsproblemer.

Internasjonalisering (i18n) og lokalisering (l10n)

Når du utvikler verktøytips for et globalt publikum, husk internasjonalisering og lokalisering:

• Tekstretning: Støtt både venstre-til-høyre (LTR) og høyre-til-venstre (RTL) tekstretninger. Bruk logiske CSS-egenskaper (f.eks. margin-inline-start, margin-inline-end) i stedet for fysiske egenskaper (f.eks. margin-left, margin-right) for layout.
• Språkspesifikke oversettelser: Tilby oversettelser av innholdet i verktøytipsene for forskjellige språk.
• Dato- og tidsformater: Tilpass dato- og tidsformater til brukerens lokalinnstillinger.
• Tallformater: Bruk passende tallformater for forskjellige regioner (f.eks. desimalskilletegn, tusenskilletegn).

Konklusjon

Implementering av tilgjengelige verktøytips krever nøye planlegging og oppmerksomhet på detaljer. Ved å følge prinsippene og teknikkene som er skissert i denne guiden, kan du lage verktøytips som er brukbare for alle, uavhengig av deres evner. Husk at tilgjengelighet er en kontinuerlig prosess, så fortsett å teste og forbedre verktøytipsene dine for å sikre at de møter behovene til alle brukerne dine.

Ressurser

• ARIA Authoring Practices Guide (APG) - Tooltip
• Web Content Accessibility Guidelines (WCAG) 2.1
• MDN Web Docs - ARIA